<html>

<head>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
    integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
  </script>

  <script src="/static/js/auth.js"></script>
  <script src="http://apps.bdimg.com/libs/layer/2.1/layer.js"></script>
</head>

<body style="width:100%;height:100%;background:#f8f8f8">
  <div style="width:100%;height:100%;margin:0 0 10px 0;text-align: center;">
    <div style="font-size:20px;font-weight:bold;color:#ddd;
      margin:0;padding-top:3px;background:#383e4b;height:40px;">
      文件云盘首页
    </div>
    <table style="height:100%;width:100%;text-align: left;border-width: 2px; border-color: rgb(203, 215, 248);">
      <tbody>
        <tr style="margin-bottom: 20px;">
          <td style="width:15%;height: 100%;background: rgb(138, 186, 248);">
            <div style="text-align: top;height:20%;margin: 10px 0 0 10px;">
              <img style="width:80px;height:80px;" src="/static/img/avatar.jpeg"></img><br>
              用户名: <p id="username" style="color: seagreen"></p>
              注册时间: <p id="regtime" style="color: seagreen"></p>
            </div>
            <div style="height: 80%;"></div>
          </td>
          <td style="width: 3px;height:100%;">
            <div style="width:100%;height: 100%;background:rgb(68, 152, 248);"></div>
          </td>
          <td style="text-align: top;vertical-align: top;">
            <div style="width:100%;">
              <span>文件列表</span>
              <button class="btn btn-primary" onclick="toUploadFile()" style="margin:5px;">上传文件
              </button>
              <div style="width:100%;height: 1px;background:rgb(48, 143, 252);"></div>
            </div>
            <div style="width:100%;">
              <table id="filetbl" style="margin-left:3%;width:96%;">
                <thead style="height:50px;border:1px;">
                  <tr style="height:50px;border:1px;">
                    <th>文件hash</th>
                    <th>文件名</th>
                    <th>文件大小</th>
                    <th>上传时间</th>
                    <th>最近更新</th>
                    <th>操作</th>
                  </tr>
                </thead>
              </table>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

<script lang="javascript">
  window.onload = function () {
    var username = document.getElementById('username');
    console.log(username);
    $.ajax({
      url: "/user/info?" + queryParams(),
      type: "POST",
      error: function (err) {
        alert(JSON.stringify(err));
      },
      success: function (body) {
        console.log(body);
        var resp = body;
        if (typeof (resp) == 'string') {
          resp = JSON.parse(body);
        }
        if (resp.code == 10005) {
          window.location.href = "/static/view/signin.html";
        }
        document.getElementById("username").innerHTML = resp.data.username;
        document.getElementById("regtime").innerHTML = resp.data.create_time;
        // document.getElementById("username").innerHTML = resp.data.Username;
        // document.getElementById("regtime").innerHTML = resp.data.SignupAt;
        updateFileList();
      }
    });
  }

  function updateFileList() {
    $.ajax({
      url: "/file/query?" + queryParams()+'&limit=20',
      type: "POST",

      error: function (err) {
        alert(JSON.stringify(err));
      },
      success: function (body) {
        console.log("前端传回来的：", body);
        if (!body) {
          return;
        }
        var data = body;
        if (!data || data.length <= 0) {
          return;
        }

        var dlHost = 'http://localhost:8080';
        var dlEntry = localStorage.getItem('downloadEntry');
        if (dlEntry != '') {
          if (dlEntry.indexOf('http:')<0) {
            dlHost = 'http://' + dlEntry;
          } else {
            dlHost = dlEntry;
          }
        }

        var downloadHtml = '<button class="btn btn-info" ' +
          'style="height:30px;margin:5px 3px;"' +
          'onClick = "downloadFile(\'' + 'http://127.0.0.1:8080' + '/file/downloadurl?filehash={0}&{1}\')">下载</button>';
        var renameFileHtml = '<button class="btn btn-warning" ' +
          'style="height:30px;margin:5px 3px;"' +
          'onClick = "renameFile(\'{0}\',\'{1}\',\'http://apigw.fileserver.com/file/' +
          'update?op=0&filehash={2}&{3}\')">重命名</button>';
        var cdlFileHtml = '<button class="btn btn-info" ' +
          'style="height:30px;margin:5px 3px;"' +
          'onClick = "cdlFile(\'' + dlHost + '/file/download?filehash={0}&{1}\')">断点下载(火狐)</button>';

        for (var i = 0; i < data.length; i++) {
          var x = document.getElementById('filetbl').insertRow();
          var cell = x.insertCell();
          cell.innerHTML = data[i].FileHash.substr(0, 20) + "...";

          cell = x.insertCell();
          cell.innerHTML = data[i].FileName;

          cell = x.insertCell();
          cell.innerHTML = data[i].FileSize;

          cell = x.insertCell();
          cell.innerHTML = data[i].UploadAt;

          cell = x.insertCell();
          cell.innerHTML = data[i].LastUpdated;

          cell = x.insertCell();
          cell.innerHTML = downloadHtml.format(data[i].FileHash, queryParams()) + cdlFileHtml
            .format(data[i].FileHash, queryParams()) +
            renameFileHtml.format(data[i].FileHash, data[i].FileName, data[i].FileHash,
              queryParams());
        }
      }
    });
  }

  function toUploadFile() {
    window.location.href = '/file/upload?' + queryParams();
    // window.location.href = "/static/view/upload.html";
  }

  function downloadFile(durl) {
    $.ajax({
      url: durl,
      type: "POST",
      error: function (err) {

        alert(JSON.stringify(err));
      },
      success: function (body) {
        console.log(body);
        try {
          alert("文件即将下载自: " + body);
          var elemIF = document.createElement("iframe");
          elemIF.src = body;
          elemIF.style.display = "none";
          document.body.appendChild(elemIF);
        } catch (e) {
          alert(e);
        }
      }
    });
  }

  function cdlFile(durl) {
    localStorage.setItem('curDownloadUrl', durl);
    layer.open({
      type: 2,
      title: '断点续传下载演示',
      maxmin: true,
      shadeClose: true, //点击遮罩关闭层
      area: ['600px', '300px'],
      content: '/static/view/download.html'
    });
  }

  function renameFile(filehash, filename, renameUrl) {
    var newFileName = prompt("\n当前文件名: {0}\n\n请输入新的文件名: ".format(filename));
    newFileName = newFileName.trim();

    if (newFileName.length <= 0) {
      alert("文件名不能为空");
      return;
    }

    if (newFileName.indexOf(" ") >= 0) {
      alert("文件名不能包含空格");
      return;
    }

    $.ajax({
      url: renameUrl + "&filename=" + newFileName,
      type: "POST",
      error: function (msg) {
        alert(msg);
      },
      success: function (body) {
        alert("文件名修改成功");
        window.location.href = '/static/view/home.html';
      }
    });
  }
</script>

</html>